<template>
	<div class="attendance">
		<h3 style="margin: 0;margin-bottom: 10px;">
			{{ userAttendance.nickName }}
		</h3>
		<div style=" width: 100%;display: flex;justify-content: space-between;">
			<div>
				<el-button type="primary" plain @click="toBack">返回</el-button>
			</div>
			<div>
				<el-date-picker v-model="selectDate" :type="dateType" :clearable="false" placeholder="选择日期"
					@change="changeDate">
				</el-date-picker>
				<el-select v-model="dateType" style="width: 80px;" @change="changeType">
					<el-option value="year" label="年"></el-option>
					<el-option value="month" label="月"></el-option>
					<el-option value="date" label="日"></el-option>
				</el-select>
			</div>
		</div>
		<div class="attendance-table">
			<el-table :data="tableData" v-loading="loading" border stripe style="width: 100%" height="100%">
				<el-table-column prop="i" label="序号" width="50" fixed="left">
				</el-table-column>
				<el-table-column prop="clockingDate" label="日期" width="100">
				</el-table-column>
				<el-table-column prop="forenoonCheckin" :label="'上午签到时间\n外勤出差第一次打卡时间'" width="170">
				</el-table-column>
				<el-table-column prop="forenoonCheckout" :label="'上午签退时间\n外勤出差第二次打卡时间'" width="170">
				</el-table-column>
				<el-table-column prop="afternoonCheckin" :label="'下午签到时间\n外勤出差第三次打卡时间'" width="170">
				</el-table-column>
				<el-table-column prop="afternoonCheckout" :label="'下午签退时间\n外勤出差第四次打卡时间'" width="170">
				</el-table-column>
				<el-table-column label="工作时长" width="170">
					<template slot-scope="scope">
						<span>{{ (() => computedTime(scope.row))() }}</span>
					</template>
				</el-table-column>
				<el-table-column prop="forenoonStatus" label="上午打卡情况" width="105">
					<template slot-scope="scope">
						<span v-if="scope.row.forenoonStatus === 0" style="color: #00ff00;">正常</span>
						<span v-else-if="scope.row.forenoonStatus === 1" style="color: #ffaa00;">迟到</span>
						<span v-else-if="scope.row.forenoonStatus === 2" style="color: #ffaa00;">早退</span>
						<span v-else-if="scope.row.forenoonStatus === 3" style="color: #ff0000;">旷工</span>
						<span v-else-if="scope.row.forenoonStatus === 4">请假</span>
						<span v-else-if="scope.row.forenoonStatus === 5" style="color: #ffaa00;">迟到+早退</span>
						<span v-else-if="scope.row.forenoonStatus === 6" style="color: #ffaa00;">未签退</span>
						<span v-else-if="scope.row.forenoonStatus === 7" style="color: #ffaa00;">迟到+未签退</span>
						<span v-else>未签到</span>
					</template>
				</el-table-column>
				<el-table-column prop="afternoonStatus" label="下午打卡情况" width="105">
					<template slot-scope="scope">
						<span v-if="scope.row.afternoonStatus === 0" style="color: #00ff00;">正常</span>
						<span v-else-if="scope.row.afternoonStatus === 1" style="color: #ffaa00;">迟到</span>
						<span v-else-if="scope.row.afternoonStatus === 2" style="color: #ffaa00;">早退</span>
						<span v-else-if="scope.row.afternoonStatus === 3" style="color: #ff0000;">旷工</span>
						<span v-else-if="scope.row.afternoonStatus === 4">请假</span>
						<span v-else-if="scope.row.afternoonStatus === 5" style="color: #ffaa00;">迟到&早退</span>
						<span v-else-if="scope.row.afternoonStatus === 6" style="color: #ffaa00;">未签退</span>
						<span v-else-if="scope.row.afternoonStatus === 7" style="color: #ffaa00;">迟到+未签退</span>
						<span v-else>未签到</span>
					</template>
				</el-table-column>
				<el-table-column label="打卡位置" width="80">
					<template slot-scope="scope">
						<el-button
							v-if="scope.row.clockinPosition !== null || (scope.row.aciClockinPosition != null || scope.row.acoClockoutPosition != null || scope.row.fciClockinPosition != null || scope.row.fcoClockoutPosition != null)"
							@click="openMap(scope.row)" type="text" size="mini">
							点击查看
						</el-button>
						<span v-else>未签到</span>
					</template>
				</el-table-column>
				<el-table-column prop="clockinType" label="打卡类型" fit>
					<template slot-scope="scope">
						<el-tag v-if="scope.row.clockinType === 0">普通</el-tag>
						<el-tag v-else-if="scope.row.clockinType === 1">外勤</el-tag>
						<el-tag v-else-if="scope.row.clockinType === 2">出差</el-tag>
					</template>
				</el-table-column>
			</el-table>
			<el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
				:current-page="fromData.currentPage" :page-sizes="[20, 50, 100]" :page-size="fromData.pageSize"
				layout="total, sizes, prev, pager, next, jumper" :total="total">
			</el-pagination>

			<!-- 地图 -->
			<el-dialog style="margin-top:0" :visible.sync="mapShow" width="75%" title="打卡位置" @close="mapCloseDialog">
				<MapPolygon style="height: 500px;" :markPoint="point"></MapPolygon>
			</el-dialog>
		</div>
	</div>
</template>

<script>
import employeeAttendanceApi from "../../api/employeeAttendance.js"
import departmentApi from "../../api/departmentManage.js";
import MapPolygon from "../../components/AMap/MapPolygon.vue"
export default {
	components: {
		MapPolygon
	},
	data() {
		return {
			point: [116.400274, 39.905812],
			mapShow: false,
			userAttendance: {},
			fromData: {
				currentPage: 1,
				pageSize: 50,
				year: null,
				yearMonth: null,
				yearMonthDay: null,
				employeeId: null
			},
			total: 0,
			tableData: [],
			loading: false,
			dateType: "month",
			selectDate: null,
			clockinRule: {},
			// forenoonCheckinTime: null,
			// forenoonCheckoutTime: null,
			// afternoonCheckinTime: null,
			// afternoonCheckoutTime: null,
		}
	},
	created() {
		const currentYear = new Date().getFullYear();
		let currentMonth = new Date().getMonth() + 1;
		if (currentMonth < 10) {
			currentMonth = '0' + currentMonth;
		}
		this.fromData.yearMonth = `${currentYear}-${currentMonth}`;
		this.selectDate = this.fromData.yearMonth;

		const data = localStorage.getItem("userAttendance");
		if (data) {
			this.userAttendance = JSON.parse(data);
			this.fromData.employeeId = this.userAttendance.employeeId
			this.getUserAttendanceList();
			//this.getClockinRule();
		}
	},
	destroyed() {
		// 删除本地存储的userAttendance数据
		localStorage.removeItem("userAttendance")
	},
	methods: {
		toBack() {
			this.$router.push({
				path: "/employeeAttendance/attendanceList"
			})
		},
		// 获取个人打卡规则
		// getClockinRule(){
		// 	const data = {
		// 		employeeId: this.userAttendance.employeeId
		// 	}
		// 	employeeAttendanceApi.getClockinRule(data).then(res =>{
		// 		if (res.code === 200){
		// 			this.clockinRule = res.data
		// 			this.forenoonCheckinTime = `上午签到时间(${this.clockinRule.forenoonCheckinTime})`
		// 			this.forenoonCheckoutTime = `上午签退时间(${this.clockinRule.forenoonCheckoutTime})`
		// 			this.afternoonCheckinTime = `下午签到时间(${this.clockinRule.afternoonCheckinTime})`
		// 			this.afternoonCheckoutTime = `下午签退时间(${this.clockinRule.afternoonCheckoutTime})`
		// 		}
		// 	})
		// },
		// 获取个人出勤列表
		getUserAttendanceList() {
			//console.log("提交数据==>", this.fromData)
			this.loading = true
			employeeAttendanceApi.getUserAttendanceList(this.fromData).then(res => {
				if (res.code === 200) {
					//console.log("获取的数据==>", res.data)
					this.total = res.data.total
					this.tableData = res.data.attendanceList.map((item, index) => {
						item.i = (this.fromData.currentPage - 1) * this.fromData.pageSize + index + 1
						return item;
					})
					this.loading = false
				}
			})
		},
		// pageSize变化
		handleSizeChange(pageSize) {
			this.fromData.pageSize = pageSize
			this.getUserAttendanceList()
		},
		// 页码变化
		handleCurrentChange(curPage) {
			this.fromData.currentPage = curPage
			this.getUserAttendanceList()
		},
		// 条件查询重置
		reset() {
			this.fromData = {
				currentPage: 1,
				pageSize: 10,
				year: null,
				yearMonth: null,
				yearMonthDay: null,
				departmentId: null,
				nickName: null
			}
			this.getUserAttendanceList()
		},
		// 条件查询提交
		onSubmit() {
			this.fromData.currentPage = 1
			this.getUserAttendanceList()
		},
		clearDepartmentId() {
			this.fromData.departmentId = null
			this.fromData.currentPage = 1
			this.getUserAttendanceList()
		},
		changeDate() {
			//console.log("选择的日期==>",this.selectDate)
			this.fromData.year = null;
			this.fromData.yearMonth = null;
			this.fromData.yearMonthDay = null;
			if (this.selectDate !== null) {
				const year = this.selectDate.getFullYear();
				const month = this.selectDate.getMonth() + 1; // 月份从 0 开始，需要加 1
				const day = this.selectDate.getDate();
				// 格式化月份和日期，确保始终是两位数
				const formattedMonth = month < 10 ? '0' + month : month;
				const formattedDay = day < 10 ? '0' + day : day;
				if (this.dateType === "year") {
					this.fromData.year = year;
				} else if (this.dateType === "month") {
					this.fromData.yearMonth = `${year}-${formattedMonth}`;
				} else {
					this.fromData.yearMonthDay = `${year}-${formattedMonth}-${formattedDay}`;
				}
			}
			this.onSubmit()
		},
		changeType() {
			this.selectDate = new Date()
			this.changeDate();
		},
		openMap(value) {
			if (value.clockinPosition) {
				this.point = value.clockinPosition.split(",");
			} else {
				this.point = [value?.fciClockinPosition?.split(",") ?? new Array(),
				value?.fcoClockoutPosition?.split(",") ?? new Array(),
				value?.aciClockinPosition?.split(",") ?? new Array(),
				value?.acoClockoutPosition?.split(",") ?? new Array()]
			}
			this.mapShow = true;
		},
		mapCloseDialog() {
			this.point = new Array;
		},
		computedTime(data) {
			let num = 0
			if (!RegExp(/未打卡/).test(data.afternoonCheckin) &&
				!RegExp(/未打卡/).test(data.afternoonCheckout)) {
				num +=
					new Date(data.clockingDate + ' ' + data.afternoonCheckout.replace(/（.*?）/g, '')).getTime() -
					new Date(data.clockingDate + ' ' + data.afternoonCheckin.replace(/（.*?）/g, '')).getTime()
			}
			if (!RegExp(/未打卡/).test(data.forenoonCheckin) &&
				!RegExp(/未打卡/).test(data.forenoonCheckout)) {
				num +=
					new Date(data.clockingDate + ' ' + data.forenoonCheckout.replace(/（.*?）/g, '')).getTime() -
					new Date(data.clockingDate + ' ' + data.forenoonCheckin.replace(/（.*?）/g, '')).getTime()
			}
			const days = Math.floor(num / (24 * 3600 * 1000))
			const leave1 = num % (24 * 3600 * 1000) //计算天数后剩余的毫秒数
			const hours = Math.floor(leave1 / (3600 * 1000))
			//计算相差分钟数
			const leave2 = leave1 % (3600 * 1000) //计算小时数后剩余的毫秒数
			const minutes = Math.floor(leave2 / (60 * 1000))
			//计算相差秒数
			const leave3 = leave2 % (60 * 1000) //计算分钟数后剩余的毫秒数
			const seconds = Math.round(leave3 / 1000)
			let str = ''
			days && (str += (days + " 天 "));
			(hours || days) && (str += (hours + " 小时 "));
			(minutes || hours || days) && (str += (minutes + " 分钟 "));
			(seconds || minutes || hours || days) && (str += (seconds + " 秒 "));
			return str ? str : "当日暂无工作时长"
		}
	}
}
</script>

<style>
.attendance {
	height: 100%;
}

.attendance-table {
	height: 88%;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	justify-content: center;
	margin-top: 10px;
}
</style>